<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            color: #000;
            background-color: #FFF;
        }
        
        input.invalid {
            background-color: #FF9;
            border: 2px red inset;
        }
        
        label.invalid {
            color: #F00;
            font-weight: bold;
        }
        
        select {
            margin-left: 80px;
        }
        
        input {
            margin-left: 30px;
        }
        
        input+select,
        input+input {
            margin-left: 20px;
        }
        
        .centered {
            text-align: center;
        }
    </style>
</head>

<body>
    <h2 class="centered">Car Picker</h2>
    <form action="someAction.cgi">
        <p><label for="emailAddr">Email Address: <input id="emailAddr" type="text" size="30" class="reqd email">
</label></p>
        <p>Colors:
            <select id="color" class="reqd">
 <option value="" selected>Choose a color</option>
 <option value="Red">Red</option>
 <option value="Green">Green</option>
 <option value="Blue">Blue</option>
 </select>
        </p>
        <p>Options:
            <label for="sunroof"><input type="checkbox" id="sunroof" value="Yes">Sunroof (Two door only)</label>
            <label for="pWindows"><input type="checkbox" id="pWindows" value="Yes">Power Windows</label>
        </p>
        <p>Doors:&nbsp;&nbsp;
            <label for="twoDoor"><input type="radio" id="twoDoor" name="DoorCt" value="twoDoor" class="radio">Two</label>
            <label for="fourDoor"><input type="radio" id="fourDoor" name="DoorCt" value="fourDoor" class="radio">Four</label>
        </p>
        <p>
            <label for="zip">Enter your Zip code or pick the dealer nearest you:<br>
    Zip: <input id="zip" type="text" size="5" maxlength="5" class="isZip dealerList">
    </label>
            <select id="dealerList" size="4" class="zip">
    <option value="California--Lemon Grove">California--Lemon Grove</option>
    <option value="California--Lomita">California--Lomita</option>
    <option value="California--Long Beach">California--Long Beach</option>
    <option value="California--Los Alamitos">California--Los Alamitos</option>
    <option value="California--Los Angeles">California--Los Angeles</option>
    </select>
        </p>
        <p><input type="submit" value="Submit">&nbsp;<input type="reset"></p>
    </form>
    <script>
        window.onload = function() {
            document.forms[0].onsubmit = validForm;
            document.getElementById("sunroof").onclick = doorSet;
        }

        function doorSet() {
            document.getElementById("twoDoor").checked = true;
        }

        function validForm() {
            var allGood = true;
            var allTags = document.forms[0].getElementsByTagName("*");

            for (var i = 0; i < allTags.length; i++) {
                if (!validTag(allTags[i])) {
                    allGood = false;
                }
            }
            return allGood;

            function validTag(thisTag) {
                var outClass = "";
                var allClasses = thisTag.className.split(" ");

                for (var j = 0; j < allClasses.length; j++) {
                    outClass += validBasedOnClass(allClasses[j]) + " ";
                }

                thisTag.className = outClass;

                if (outClass.indexOf("invalid") > -1) {
                    invalidLabel(thisTag.parentNode);
                    thisTag.focus();
                    if (thisTag.nodeName == "INPUT") {
                        thisTag.select();
                    }
                    return false;
                }
                return true;

                function validBasedOnClass(thisClass) {
                    var classBack = "";

                    switch (thisClass) {
                        case "":
                        case "invalid":
                            break;
                        case "reqd":
                            if (allGood && thisTag.value == "") {
                                classBack = "invalid ";
                            }
                            classBack += thisClass;
                            break;
                        case "radio":
                            if (allGood && !radioCheck(thisTag.name)) {
                                classBack = "invalid "
                            }
                            classBack += thisClass;
                            break;
                        case "isNum":
                        case "isZip":

                        case "email":
                            classBack += thisClass;
                            break;
                        default:
                            if (allGood && !crossCheck(thisTag, thisClass)) {
                                classBack = "invalid ";
                            }
                            classBack += thisClass;
                    }
                    return classBack;
                    //单选验证
                    function radioCheck(radioName) {
                        //获取form表单中所有单选框,判断是否有单选框处于选中状态
                        var radio = document.forms[0][radioName];
                        for (var i = 0; i < radio.length; i++) {
                            if (radio[i].checked) {
                                return true;
                            }
                        }
                        return false;
                    }

                    function crossCheck(inTag, otherFieldID) {
                        if (!document.getElementById(otherFieldID)) {
                            return false;
                        }
                        return (inTag.value != "" || document.getElementById(otherFieldID).value != "");
                    }
                }
            }

            function invalidLabel(parentTag) {
                if (parentTag.nodeName == "LABEL") {
                    parentTag.className += " invalid";
                }
            }
        }
    </script>
</body>

</html>